import React from 'react'
import request from '../../api/axios'
import './LineText.scss'

class LineText extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            content: ['xxxx', 'xxxxxx', 'xxxxxxxxxx'],
            url:props.texturl
        }
        this.setContent = this.setContent.bind(this);
    }

    componentDidMount(){
        request.getData(this.state.url).then(res => {
            // console.log('linetext-data', res);
            this.setContent(res.data);
        })
    }
    setContent(text){
        // console.log(text);
        // 分割文本换行
        let temptxt =null;
        // 制表符和空格处理
        text = text.replace(/\t/g,'\u00a0\u00a0');
        text = text.replace(/\b/g,'\u00a0');
        // temptxt = temptxt.replace(/\r\n/g,';')
        temptxt = text.split(/\n/g)
    //    console.log(temptxt);
       this.setState({content:temptxt});
    }

    render() {
        return (
            <ol className="line-text">
                {/* <li>
                    <span className="line-num">1</span>
                    <span className='line-content'>内容获取调试
                    <button onClick={() => {
                            // localRequest.myfetch('../static/01.txt')
                            // request.getApi('http://localhost:3000/static/01.json ')
                          
                        }}>111</button>
                    </span>
                </li> */}
                {this.state.content.map((text, num) => {
                    return (
                        <li key={num}>
                            <span className="line-num">{num}</span>
                            <span className='line-content'>{text}</span>
                        </li>
                    )
                })}
            </ol>
        )
    }
}
export default LineText;